<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import { getDepALLAPI } from '@/api'
  import type { DepAll } from '@/types/consult'
  import { computed, onMounted, ref } from 'vue'

  const props = defineProps<{ type: string; illnessType: string }>()
  const departmentList = ref<DepAll[]>([])
  const activeIndex = ref(0)
  onMounted(() => {
    getDepartmentList()
  })

  const getDepartmentList = async () => {
    departmentList.value = await getDepALLAPI()
  }

  // 返回当前的科室的所有科室类型
  const ChildList = computed(() => {
    // 这里为什么要加？ 因为计算属性初始化的时候 onMounted还没有执行
    return departmentList.value[activeIndex.value]?.child || [] //所有子科室
  })
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(item, index) in departmentList"
        :key="item.id"
        class="department-item"
        :class="{ active: index === activeIndex }"
        @click="activeIndex = index"
        >{{ item.name }}</view
      >
      <!-- <view class="department-item">外科</view>
      <view class="department-item"></view> -->
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        v-for="item in ChildList"
        :key="item.id"
        :url="`/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&id=${item.id}`"
        class="department-item"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
